<script>
import { followAuthApi, getArticleApi, unFollowAuthApi } from '@/api'
import Comment from './components/comment.vue'
export default {
  data() {
    return {
      artical: {}
    }
  },
  methods: {
    async getArtical() {
      const res = await getArticleApi(this.$route.query.id)
      this.artical = res.data.data
      console.log(this.artical);
    },
    async follow() {
      await followAuthApi({target: this.artical.aut_id})
      this.$toast.success('收获粉丝一枚')
      // 手动将状态改为关注
      this.artical.is_followed = true
    },
    async unFollow() {
      await unFollowAuthApi(this.artical.aut_id)
      this.$toast.success('失去粉丝一枚')
      this.artical.is_followed = false
    }
  },
  created() {
    this.getArtical()
  },
  components: {
    comment: () => import('./components/comment.vue')
  }
}
</script>
<template>
  <div class="detail">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="content">
      <!-- 文章标题 -->
      <h2>{{artical.title}}</h2>
      <!-- 作者信息 -->
      <div class="author">
        <van-image
          width="40"
          height="40"
          :src="artical.aut_photo"
          round
        />
        <div class="msg">
          <div class="name">{{artical.aut_name}}</div>
          <div class="time">{{artical.pubdate | timefromnow}}</div>
        </div>
        <van-button @click="follow" v-if="!artical.is_followed" type="info" size="small" round><van-icon name="plus" />关注</van-button>
        <van-button @click="unFollow" v-else type="info" size="small" round><van-icon name="success" />已关注</van-button>
      </div>
      <!-- 文章内容 -->
      <div class="art" v-html="artical.content"></div>
      <div class="end">-- end --</div>
      <!-- 点赞区域 -->
      <div class="btn">
        <van-button v-if="artical.attitude === 1" class="one" round plain>
          <van-icon name="good-job-o" />点赞
        </van-button>
        <van-button v-else class="one" round plain type="primary">
          <van-icon name="good-job-o" />点赞
        </van-button>
        <van-button v-if="artical.attitude === 0" round plain>
          <van-icon name="delete-o" />不喜欢
        </van-button>
        <van-button v-else round plain type="danger">
          <van-icon name="delete-o" />不喜欢
        </van-button>
      </div>
      <!-- 评论区域：未开放，请等待 -- 后面单独写 -->
      <comment />
    </div>
  </div>
</template>
<style lang="less">
    .detail {
      font-size: 16px;
      .content {
        padding: 0 16px;
        .author {
          margin: 0 10px;
          display: flex;
          align-items: center;
          .msg {
            flex: 1;
            margin-left: 8px;
          }
        }
        .art {
          margin-top: 30px;

          // white-space: pre-wrap;
          word-break: break-all;
          line-height: 1.2;
          pre {
            // background-color: #f00;
            width: 100%;
            overflow: auto;
            padding: 5px 0;
            code {
              // white-space: pre-wrap;
              // word-break: break-all;
            }
          }
          h4 {
            line-height: 1.5;
          }
          p {
            text-indent: 1em;
          }

          ul li {
            padding: 0 15px;
            &:before {
              content: '√';
              margin-right: 5px;
            }
          }
          img {
            width: 90%;
          }
        }
        .end {
          text-align: center;
          color: #999;
          margin: 30px 0;
        }
        .btn {
          text-align: center;
          .one {
            margin-right: 30px;
          }
        }
      }
      
    }
</style>